/**
 * WeChatVoiceImageAnimation 测试页面
 *
 * 展示基于PNG图片的微信语音播放动画效果
 */

/* eslint-disable react/no-unstable-nested-components */
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { WeChatVoiceImageAnimation } from './components/AnimatedComponents/WeChatVoiceImageAnimation';

// ==================== 示例1: 基础用法 ====================
const BasicExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例1: 基础用法</Text>
      <View style={styles.demoContent}>
        <View style={styles.demoRow}>
          <WeChatVoiceImageAnimation playing={playing} />
          <Text style={styles.demoDescription}>默认微信绿（#07C160）</Text>
        </View>
        <TouchableOpacity
          style={[styles.button, playing && styles.buttonActive]}
          onPress={() => setPlaying(!playing)}
        >
          <Text style={styles.buttonText}>{playing ? '停止播放' : '开始播放'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

// ==================== 示例2: 自定义颜色 ====================
const CustomColorExample: React.FC = () => {
  const [playingBlue, setPlayingBlue] = useState(false);
  const [playingRed, setPlayingRed] = useState(false);
  const [playingOrange, setPlayingOrange] = useState(false);

  const ColorDemo = ({
    color,
    colorName,
    playing,
    onToggle,
  }: {
    color: string;
    colorName: string;
    playing: boolean;
    onToggle: () => void;
  }) => (
    <View style={styles.colorDemoItem}>
      <View style={styles.colorDemoHeader}>
        <WeChatVoiceImageAnimation playing={playing} color={color} />
        <View style={styles.colorDemoInfo}>
          <Text style={styles.colorName}>{colorName}</Text>
          <Text style={styles.colorValue}>{color}</Text>
        </View>
      </View>
      <TouchableOpacity
        style={[styles.smallButton, playing && styles.smallButtonActive]}
        onPress={onToggle}
      >
        <Text style={styles.smallButtonText}>{playing ? '停止' : '播放'}</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例2: 自定义颜色</Text>
      <View style={styles.demoContent}>
        <ColorDemo
          color="#007AFF"
          colorName="蓝色"
          playing={playingBlue}
          onToggle={() => setPlayingBlue(!playingBlue)}
        />
        <ColorDemo
          color="#FF3B30"
          colorName="红色"
          playing={playingRed}
          onToggle={() => setPlayingRed(!playingRed)}
        />
        <ColorDemo
          color="#FF9500"
          colorName="橙色"
          playing={playingOrange}
          onToggle={() => setPlayingOrange(!playingOrange)}
        />
        <Text style={styles.hintText}>
          ⚠️ Android 上 tintColor 支持有限，可能显示效果与 iOS 不同
        </Text>
      </View>
    </View>
  );
};

// ==================== 示例3: 不同尺寸 ====================
const DifferentSizesExample: React.FC = () => {
  const [playingAll, setPlayingAll] = useState(false);

  const SizeDemo = ({ size, label }: { size: number; label: string }) => (
    <View style={styles.sizeDemoItem}>
      <WeChatVoiceImageAnimation playing={playingAll} size={size} />
      <Text style={styles.sizeLabel}>{label}</Text>
      <Text style={styles.sizeValue}>{size}px</Text>
    </View>
  );

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例3: 不同尺寸</Text>
      <View style={styles.demoContent}>
        <View style={styles.sizeDemoRow}>
          <SizeDemo size={20} label="小" />
          <SizeDemo size={30} label="中（默认）" />
          <SizeDemo size={40} label="大" />
          <SizeDemo size={50} label="特大" />
        </View>
        <TouchableOpacity
          style={[styles.button, playingAll && styles.buttonActive]}
          onPress={() => setPlayingAll(!playingAll)}
        >
          <Text style={styles.buttonText}>
            {playingAll ? '全部停止' : '全部播放'}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

// ==================== 示例4: 模拟消息列表 ====================
const MessageListExample: React.FC = () => {
  const [playingId, setPlayingId] = useState<number | null>(null);

  const messages = [
    { id: 1, duration: 3, time: '10:30' },
    { id: 2, duration: 15, time: '10:32' },
    { id: 3, duration: 60, time: '10:35' },
    { id: 4, duration: 8, time: '10:38' },
  ];

  const MessageItem = ({ id, duration, time }: { id: number; duration: number; time: string }) => {
    const isPlaying = playingId === id;

    return (
      <TouchableOpacity
        style={styles.messageItem}
        onPress={() => setPlayingId(isPlaying ? null : id)}
        activeOpacity={0.7}
      >
        <View style={styles.messageContent}>
          <WeChatVoiceImageAnimation playing={isPlaying} size={24} color='red' />
          <Text style={styles.messageDuration}>{duration}″</Text>
        </View>
        <Text style={styles.messageTime}>{time}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例4: 模拟消息列表</Text>
      <View style={styles.demoContent}>
        <Text style={styles.sectionSubtitle}>点击语音消息播放/停止</Text>
        {messages.map(msg => (
          <MessageItem key={msg.id} {...msg} />
        ))}
      </View>
    </View>
  );
};

// ==================== 示例5: 帧速率对比 ====================
const FrameRateExample: React.FC = () => {
  const [playingAll, setPlayingAll] = useState(false);

  const SpeedDemo = ({
    frameDuration,
    label,
  }: {
    frameDuration: number;
    label: string;
  }) => (
    <View style={styles.speedDemoItem}>
      <WeChatVoiceImageAnimation
        playing={playingAll}
        frameDuration={frameDuration}
        size={35}
      />
      <Text style={styles.speedLabel}>{label}</Text>
      <Text style={styles.speedValue}>{frameDuration}ms/帧</Text>
    </View>
  );

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例5: 帧速率对比</Text>
      <View style={styles.demoContent}>
        <View style={styles.speedDemoRow}>
          <SpeedDemo frameDuration={500} label="慢速" />
          <SpeedDemo frameDuration={300} label="正常" />
          <SpeedDemo frameDuration={150} label="快速" />
        </View>
        <TouchableOpacity
          style={[styles.button, playingAll && styles.buttonActive]}
          onPress={() => setPlayingAll(!playingAll)}
        >
          <Text style={styles.buttonText}>
            {playingAll ? '全部停止' : '全部播放'}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

// ==================== 性能说明 ====================
const PerformanceInfo: React.FC = () => {
  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>性能分析</Text>
      <View style={styles.demoContent}>
        <View style={styles.performanceItem}>
          <Text style={styles.performanceIcon}>✅</Text>
          <View style={styles.performanceContent}>
            <Text style={styles.performanceTitle}>原生驱动</Text>
            <Text style={styles.performanceText}>
              使用 opacity 动画，支持 useNativeDriver: true，动画在原生层执行，不占用 JS 线程。
            </Text>
          </View>
        </View>

        <View style={styles.performanceItem}>
          <Text style={styles.performanceIcon}>✅</Text>
          <View style={styles.performanceContent}>
            <Text style={styles.performanceTitle}>图片缓存</Text>
            <Text style={styles.performanceText}>
              PNG 图片在组件挂载时一次性加载并缓存，无重复加载开销。
            </Text>
          </View>
        </View>

        <View style={styles.performanceItem}>
          <Text style={styles.performanceIcon}>✅</Text>
          <View style={styles.performanceContent}>
            <Text style={styles.performanceTitle}>低内存占用</Text>
            <Text style={styles.performanceText}>
              同时渲染3张小图片，内存占用极小（约 10-15 KB）。
            </Text>
          </View>
        </View>

        <View style={styles.performanceItem}>
          <Text style={styles.performanceIcon}>✅</Text>
          <View style={styles.performanceContent}>
            <Text style={styles.performanceTitle}>零 CPU 抖动</Text>
            <Text style={styles.performanceText}>
              帧切换通过 opacity 控制显示/隐藏，无需重新渲染，CPU 开销极小（&lt; 2%）。
            </Text>
          </View>
        </View>

        <View style={styles.performanceItem}>
          <Text style={styles.performanceIcon}>⚠️</Text>
          <View style={styles.performanceContent}>
            <Text style={styles.performanceTitle}>tintColor 兼容性</Text>
            <Text style={styles.performanceText}>
              iOS 完全支持 tintColor 动态改变图片颜色，Android 部分支持（取决于图片格式）。
            </Text>
          </View>
        </View>

        <View style={styles.performanceItem}>
          <Text style={styles.performanceIcon}>💡</Text>
          <View style={styles.performanceContent}>
            <Text style={styles.performanceTitle}>总结</Text>
            <Text style={styles.performanceText}>
              总体性能优秀，适合生产环境使用。相比 SVG 方案，PNG 方案渲染性能更稳定。
            </Text>
          </View>
        </View>
      </View>
    </View>
  );
};

// ==================== 对比说明 ====================
const ComparisonInfo: React.FC = () => {
  const ComparisonRow = ({
    feature,
    png,
    svg,
  }: {
    feature: string;
    png: string;
    svg: string;
  }) => (
    <View style={styles.comparisonRow}>
      <Text style={styles.comparisonFeature}>{feature}</Text>
      <Text style={styles.comparisonValue}>{png}</Text>
      <Text style={styles.comparisonValue}>{svg}</Text>
    </View>
  );

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>PNG vs SVG 方案对比</Text>
      <View style={styles.demoContent}>
        <View style={styles.comparisonTable}>
          <View style={styles.comparisonHeader}>
            <Text style={styles.comparisonHeaderText}>特性</Text>
            <Text style={styles.comparisonHeaderText}>PNG</Text>
            <Text style={styles.comparisonHeaderText}>SVG</Text>
          </View>

          <ComparisonRow feature="渲染性能" png="⭐⭐⭐⭐⭐" svg="⭐⭐⭐⭐" />
          <ComparisonRow feature="颜色定制" png="⭐⭐⭐" svg="⭐⭐⭐⭐⭐" />
          <ComparisonRow feature="缩放质量" png="⭐⭐⭐" svg="⭐⭐⭐⭐⭐" />
          <ComparisonRow feature="包体积" png="⭐⭐⭐⭐" svg="⭐⭐⭐⭐⭐" />
          <ComparisonRow feature="兼容性" png="⭐⭐⭐⭐⭐" svg="⭐⭐⭐⭐" />
          <ComparisonRow feature="实现复杂度" png="⭐⭐⭐⭐⭐" svg="⭐⭐⭐⭐" />
        </View>
      </View>
    </View>
  );
};

// ==================== 主入口 ====================
export function TestWeChatVoiceImage() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollContainer}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>WeChatVoiceImageAnimation</Text>
          <Text style={styles.headerSubtitle}>基于 PNG 图片的微信语音播放动画</Text>
        </View>

        <BasicExample />
        <CustomColorExample />
        <DifferentSizesExample />
        <MessageListExample />
        <FrameRateExample />
        <PerformanceInfo />
        <ComparisonInfo />

        <View style={styles.footer}>
          <Text style={styles.footerText}>
            ✨ 使用原生驱动，性能优秀，适合生产环境使用
          </Text>
          <Text style={styles.footerText}>
            📖 详细文档请查看 docs/WeChatVoiceImageAnimation_README.md
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

// ==================== 样式定义 ====================
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContainer: {
    flex: 1,
  },
  header: {
    padding: 20,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  headerTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333333',
    marginBottom: 4,
  },
  headerSubtitle: {
    fontSize: 14,
    color: '#666666',
  },
  exampleContainer: {
    marginTop: 20,
    backgroundColor: '#ffffff',
    borderRadius: 8,
    marginHorizontal: 16,
    overflow: 'hidden',
  },
  exampleTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333333',
    padding: 12,
    backgroundColor: '#f9f9f9',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  demoContent: {
    padding: 20,
  },
  sectionSubtitle: {
    fontSize: 14,
    color: '#666666',
    marginBottom: 12,
  },

  // 基础示例样式
  demoRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16,
    marginBottom: 16,
  },
  demoDescription: {
    fontSize: 14,
    color: '#666666',
  },

  // 颜色示例样式
  colorDemoItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  colorDemoHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    flex: 1,
  },
  colorDemoInfo: {
    flex: 1,
  },
  colorName: {
    fontSize: 15,
    color: '#333333',
    fontWeight: '500',
    marginBottom: 2,
  },
  colorValue: {
    fontSize: 12,
    color: '#999999',
    fontFamily: 'Courier',
  },

  // 尺寸示例样式
  sizeDemoRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'flex-end',
    marginBottom: 20,
    paddingVertical: 16,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
  },
  sizeDemoItem: {
    alignItems: 'center',
    gap: 8,
  },
  sizeLabel: {
    fontSize: 13,
    color: '#666666',
    marginTop: 4,
  },
  sizeValue: {
    fontSize: 11,
    color: '#999999',
  },

  // 消息列表样式
  messageItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#07C160',
    borderRadius: 8,
    padding: 12,
    marginBottom: 10,
  },
  messageContent: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  messageDuration: {
    fontSize: 14,
    color: '#ffffff',
    fontWeight: '500',
  },
  messageTime: {
    fontSize: 12,
    color: '#ffffff',
    opacity: 0.8,
  },

  // 帧速率示例样式
  speedDemoRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 20,
    paddingVertical: 16,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
  },
  speedDemoItem: {
    alignItems: 'center',
    gap: 8,
  },
  speedLabel: {
    fontSize: 13,
    color: '#666666',
    marginTop: 4,
  },
  speedValue: {
    fontSize: 11,
    color: '#999999',
  },

  // 按钮样式
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonActive: {
    backgroundColor: '#FF3B30',
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 15,
    fontWeight: '600',
  },
  smallButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 6,
  },
  smallButtonActive: {
    backgroundColor: '#FF3B30',
  },
  smallButtonText: {
    color: '#ffffff',
    fontSize: 13,
    fontWeight: '600',
  },

  // 提示文字
  hintText: {
    fontSize: 13,
    color: '#999999',
    marginTop: 12,
    fontStyle: 'italic',
    lineHeight: 18,
  },

  // 性能信息样式
  performanceItem: {
    flexDirection: 'row',
    marginBottom: 16,
  },
  performanceIcon: {
    fontSize: 20,
    marginRight: 12,
    marginTop: 2,
  },
  performanceContent: {
    flex: 1,
  },
  performanceTitle: {
    fontSize: 15,
    fontWeight: '600',
    color: '#333333',
    marginBottom: 4,
  },
  performanceText: {
    fontSize: 13,
    color: '#666666',
    lineHeight: 19,
  },

  // 对比表格样式
  comparisonTable: {
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 8,
    overflow: 'hidden',
  },
  comparisonHeader: {
    flexDirection: 'row',
    backgroundColor: '#f5f5f5',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  comparisonHeaderText: {
    flex: 1,
    padding: 12,
    fontSize: 14,
    fontWeight: 'bold',
    color: '#333333',
    textAlign: 'center',
  },
  comparisonRow: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  comparisonFeature: {
    flex: 1,
    padding: 12,
    fontSize: 13,
    color: '#333333',
    textAlign: 'center',
  },
  comparisonValue: {
    flex: 1,
    padding: 12,
    fontSize: 13,
    color: '#666666',
    textAlign: 'center',
  },

  // 页脚
  footer: {
    padding: 20,
    alignItems: 'center',
    marginTop: 20,
    marginBottom: 40,
  },
  footerText: {
    fontSize: 13,
    color: '#999999',
    textAlign: 'center',
    marginTop: 4,
  },
});
